.varela-round-regular {
   /* font-family: "Varela Round", sans-serif; */
   font-weight: 1000;
   font-size: 44px;
   font-style: normal;
   color: #0075fe;
   border-width: 4px;
   border-color: aliceblue;
   border-radius: 4px;
   /* -webkit-text-stroke-width: 0.1px; */
   /* -webkit-text-stroke-color: white; */
   text-shadow: 5px 4px 10px #000000;
}

.titulo-jogo-memoria {
   z-index: 2;
   display: flex;
   position: relative;
   justify-content: center;
   margin-bottom: 30px;
   text-align: center;
   /* -webkit-text-stroke-width: 1.4px; */
   /* --text-stroke-size: 1px;
   --text-stroke-color: #fb1a1a; */
   /* border-color: coral; */
   line-height: 40px;
   text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.205);
   color: #0075FE;
   -webkit-text-stroke-color: white;
   transform: rotate(-2deg);

}

.titulo-jogo-memoria-borda {
   z-index: 1;
   display: flex;
   position: absolute;
   justify-content: center;
   margin-bottom: 30px;
   text-align: center;
   -webkit-text-stroke-width: 9.4px;
   /* --text-stroke-size: 1px;
   --text-stroke-color: #fb1a1a; */
   /* border-color: coral; */
   line-height: 40px;
   text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.205);
   color: #0075FE;
   -webkit-text-stroke-color: white;
   transform: rotate(-2deg);

}

.font-com-borda {
   position: relative;
   display: flex;
   justify-content: center;
}

body {
   background-color: #5D5FEF;
}

.grid_animal {
   background-color: #1d1e4024;
   border-width: 2px;
   display: grid;
   border-style: dotted;
   position: relative;
   grid-template-columns: repeat(3, minmax(auto, 1fr));
   grid-template-rows: repeat(3, minmax(auto, 1fr));
   gap: 16px;
   /* width: 100%;
   max-width: 550px; */
   height: 100%;
   /* margin: 20px 5%; */
   justify-content: space-between;
   /* width: 86%; */
   padding: 16px;
   border-radius: 40px;

}

.card {
   aspect-ratio: 1/1;
   width: 25%;
   /* height: 200px; */
   /* background-color: #f44646; */
   border-radius: 22px;
   box-shadow: 0px 3px 0px 1px #00000017;
   position: relative;
   transition: all 400ms ease;
   transform-style: preserve-3d;

}



.revela-carta {
   transform: rotateY(180deg);
}

.desrevela-carta {
   transform: rotateY(30deg);
}

/* 
.card:hover {
   transform: rotateY(180deg);
} */

.face {
   width: 31%;
   /* height: auto; */
   /* position: absolute; */

}

.face:hover {


   transform: scale(1.03);
}



.tamanho-carta {

   aspect-ratio: 1/1;
   min-width: 75px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
   flex-wrap: nowrap;

}


.frente-carta {
   background-image: url("../images/jogo_da_memoria/verso.jpg");
   background-size: cover;
   background-position: center;
   backface-visibility: hidden;
   background-size: 105%;
}

/* .frente-carta:hover {
   transform: rotateY(180deg);
} */

.verso-carta {
   background-image: url("../images/jogo_da_memoria/abacaxi.jpg");
   background-size: cover;
   background-position: center;
   backface-visibility: hidden;
}

/* .verso-carta:hover {
   transform: rotateY(180deg);
} */

#div_block_fundo {
   background-color: #195e1d87;
}

.cartacerta-z-index {

   z-index: 20;
}

.pato {
   background-image: url(../images/qual_animal/pato.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.porco {
   background-image: url(../images/qual_animal/porco.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.frango {
   background-image: url(../images/qual_animal/frango.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.vaca {
   background-image: url(../images/qual_animal/vaca.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.ovelha {
   background-image: url(../images/qual_animal/ovelha.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.cavalo {
   background-image: url(../images/qual_animal/cavalo.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.coelho {
   background-image: url(../images/qual_animal/coelho.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.bode {
   background-image: url(../images/qual_animal/bode.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

.gato {
   background-image: url(../images/qual_animal/gato.jpg);
   background-color: aqua;
   background-position: center;
   background-size: cover;
}

#card-menu-pato {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-porco {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-frango {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-vaca {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-ovelha {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-cavalo {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-coelho {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-bode {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

#card-menu-gato {
   font-size: 32px;
   z-index: 50;
   color: aliceblue;
   display: none;
   flex-direction: column;
   align-content: center;
   align-items: center;
   justify-content: center;
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.805);
   top: 0;
   transition: all 400ms ease-in-out;
   backdrop-filter: blur(8px);

}

.opcao {
   font-weight: 800;
   font-size: 28px;
   /* border: 0; */
   border-style: solid;
   font-family: inherit;

   border-radius: 32px;
   background-color: #E5E5E5;
   color: #222222;
   padding: 12px;
   padding-left: 32px;
   padding-right: 32px;
   margin-top: 12px;
   margin-bottom: 16px;
   min-width: 260px;
   text-shadow: 2px 4px 10px rgb(0 0 0 / 21%);
   -webkit-text-stroke-width: 1.4px;
   border-color: #ffffff;
   border-width: 4px;
}

.opcao:hover {


   transition: all 200ms ease-in-out;
   transform: scale(1.02);
   box-shadow: 3px 11px 20px 2px #00000078;
}



.texto-centrado {
   display: flex;
   text-align: center;
   width: 90%;
   padding-top: 22px;
   padding-bottom: 22px;
   background-color: #4647d757;
   border-radius: 32px;
   flex-direction: column;
   align-items: center;
   border: #8a82ee;
   border-style: solid;
   border-width: 2px;
   position: relative;
}

.confeti-pato {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-porco {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-frango {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-vaca {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-ovelha {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-cavalo {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-coelho {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-bode {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.confeti-gato {
   width: 284px;
   height: 285px;
   z-index: -1;
   top: 24px;
   display: none;
   position: absolute;
   /* background-color: #7fffd42e; */
   margin-bottom: 105px;
}

.linha-1-anima {
   width: 250px;
   margin-bottom: 15px;
   /* background-color: blueviolet; */
   height: 38px;
}

.casa-voltar-home-animal {
   display: flex;
   width: 100%;
   max-width: 350px;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
}

.mini-icone {
   transform: scale(0.8);
   margin: 10px;
}

.resolvido {
   opacity: 40%;
}

.certo:active {
   background-color: #71D025;
   color: #ffffff;
   border-color: #84FC4B;

   transition: all 100ms ease;
   transform: scale(1.05);
}

.certo-clicado {
   background-color: #71D025;
   color: #ffffff;
   border-color: #84FC4B;

   transition: all 100ms ease;
   /* transform: scale(1.05); */
}

.errado-clicado {
   background-color: #6C6C6C;
   color: #C5C5C5;
   border-color: #3D3D3D;
   -webkit-text-stroke-width: 5.4px;
   -webkit-text-stroke-color: #3d3d3d5e;

   transition: all 100ms ease;
   /* transform: scale(1.05); */

}

.opcao-pos-clique {
   font-weight: 800;
   font-size: 28px;
   /* border: 0; */
   border-style: solid;
   font-family: inherit;

   border-radius: 32px;
   /* background-color: #E5E5E5;
   color: #222222; */
   padding: 12px;
   padding-left: 32px;
   padding-right: 32px;
   margin-top: 12px;
   margin-bottom: 16px;
   min-width: 260px;
   text-shadow: 2px 4px 10px rgb(0 0 0 / 21%);
   /* -webkit-text-stroke-width: 1.4px;
   border-color: #ffffff; */
   border-width: 4px;
}


.errado:active {
   background-color: #a82929;
   color: #ffffff;
   border-color: #ff4d40;

   transition: all 100ms ease;
   transform: scale(1.05);


}

.opcao-pato-1 {}

.opcao-pato-2 {}

.opcao-pato-3 {}